<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逐星科技社 - 关于我们</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        dark: '#0f172a',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-glass {
                background: rgba(15, 23, 42, 0.7);
                backdrop-filter: blur(10px);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(90deg, #165DFF, #69b1ff);
            }
        }
    </style>
</head>
<body class="bg-dark text-light min-h-screen">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-glass border-b border-gray-800">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center">
                <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                <h1 class="text-xl font-bold">逐星科技社</h1>
            </div>

            <!-- 桌面导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="index.html" class="hover:text-primary transition-colors py-1">首页</a>
                <a href="about.html" class="text-primary border-b-2 border-primary py-1">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-1">社团活动</a>
                <a href="culture.html" class="hover:text-primary transition-colors py-1">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-1">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-1">规章制度</a>
                <a href="join.html" class="hover:text-primary transition-colors py-1">加入我们</a>
                <a href="thanks.html" class="hover:text-primary transition-colors py-1">特别感谢</a>
            </nav>

            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-2xl" id="menuBtn">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-dark border-t border-gray-800" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="index.html" class="hover:text-primary transition-colors py-2">首页</a>
                <a href="about.html" class="text-primary py-2">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-2">社团活动</a>
                <a href="culture.html" class="hover:text-primary transition-colors py-2">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-2">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-2">规章制度</a>
                <a href="join.html" class="hover:text-primary transition-colors py-2">加入我们</a>
                <a href="thanks.html" class="text-primary py-2">特别感谢</a>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="pt-32 pb-16 px-4 border-b border-gray-800">
        <div class="container mx-auto max-w-6xl">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4">关于我们</h1>
            <p class="text-gray-400 max-w-3xl">
                逐星科技社是新宁一中的学生科技组织，旨在为对科学技术有兴趣的学生提供交流与学习的平台
            </p>
        </div>
    </section>

    <!-- 社团简介 -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row gap-12 items-center">
                <div class="md:w-1/2">
                    <h2 class="text-2xl font-bold mb-6">社团简介</h2>
                    <p class="text-gray-300 mb-4">
                        逐星科技社成立于2024年，是新宁一中的一个充满梦想与激情的学生科技组织。我们秉承着"探索未知、勇敢创新"的理念，致力于为每一位对科学与技术怀有热情的学生提供广阔的学习平台。
                    </p>
                    <p class="text-gray-300 mb-4">
                        社团坚持学校党委的领导和接受学校团委的指导，遵守宪法、法律、法规和国家政策，践行社会主义核心价值观，弘扬爱国主义精神，遵守社会道德风尚。
                    </p>
                    <p class="text-gray-300">
                        我们的主要领域涵盖了编程、建模、原画设计、电子音乐制作等前沿科技与艺术的结合，为社员提供全方位的科技知识学习和实践机会。
                    </p>
                </div>
                <div class="md:w-1/2">
                    <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-full max-w-md mx-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- 部门设置 -->
    <section class="py-16 px-4 bg-gray-900">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-2xl font-bold mb-10 text-center">部门设置</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 技术部 -->
                <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-primary/50 transition-all">
                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-microchip text-xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">技术部</h3>
                    <p class="text-gray-400 mb-4">
                        负责社团的技术学习与项目开发，是社团的核心技术力量
                    </p>
                    <ul class="text-gray-300 space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>编程组：学习探讨编程语言</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>建模组：学习探讨建模剪辑技术</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>科创组：学习科学创新知识</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>电子音乐组：创作和制作电子音乐</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>人工智能研究组：探究人工智能技术</span>
                        </li>
                    </ul>
                </div>

                <!-- 人事部 -->
                <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-primary/50 transition-all">
                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-users text-xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">人事部</h3>
                    <p class="text-gray-400 mb-4">
                        负责人事管理与财务管理，保障社团的正常运转
                    </p>
                    <ul class="text-gray-300 space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>人员管理组：负责招新与社员管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>绩效评定组：评估社员表现与贡献</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>财务组：管理社团财务与物资</span>
                        </li>
                    </ul>
                </div>

                <!-- 责任部 -->
                <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-primary/50 transition-all">
                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-cogs text-xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">责任部</h3>
                    <p class="text-gray-400 mb-4">
                        负责社团活动组织与宣传，是社团的后勤保障
                    </p>
                    <ul class="text-gray-300 space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>宣传与活动实践组：负责宣传推广</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>活动策划组：设计与组织社团活动</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>文书组：处理社团文件与档案</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>原画组：创作原画作品与视觉设计</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check text-primary mt-1 mr-2"></i>
                            <span>互联网帐号管理组：管理社团官方账号</span>
                        </li>
                    </ul>
                </div>

                <!-- 理事会 -->
                <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-primary/50 transition-all">
                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-sitemap text-xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">理事会</h3>
                    <p class="text-gray-400 mb-6">
                        负责联合处理社团日常事务，统筹各部门工作协调与发展规划
                    </p>
                    <a href="council.html" class="inline-flex items-center px-4 py-2 bg-primary hover:bg-primary/80 rounded-lg transition-all">
                        <span>了解更多</span>
                        <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between mb-10">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center mb-4">
                        <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                        <h3 class="text-xl font-bold">逐星科技社</h3>
                    </div>
                    <p class="text-gray-400 max-w-md">
                        探索未知、勇敢创新，逐星科技社致力于为每一位对科学与技术怀有热情的学生提供广阔的学习平台。
                    </p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2">
                            <li><a href="index.html" class="text-gray-400 hover:text-primary">首页</a></li>
                            <li><a href="about.html" class="text-gray-400 hover:text-primary">关于我们</a></li>
                            <li><a href="activities.html" class="text-gray-400 hover:text-primary">社团活动</a></li>
                            <li><a href="join.html" class="text-gray-400 hover:text-primary">加入我们</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">资源中心</h4>
                        <ul class="space-y-2">
                            <li><a href="regulations.html" class="text-gray-400 hover:text-primary">规章制度</a></li>
                            <li><a href="culture.html" class="text-gray-400 hover:text-primary">社团文化</a></li>
                            <li><a href="council.html" class="text-gray-400 hover:text-primary">理事会</a></li>
                        </ul>
                    </div>

                    <div class="col-span-2 md:col-span-1">
                        <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center text-gray-400">
                                <i class="fa fa-envelope mr-2"></i>
                                <a href="mailto:boluochuixue@outlook.com" class="hover:text-primary">boluochuixue@outlook.com</a>
                            </li>
                            <li class="flex items-center text-gray-400">
                                <i class="fa fa-qq mr-2"></i>
                                <span>1465153649</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2024 逐星科技社 版权所有
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-primary text-xl"><i class="fa fa-qq"></i></a>
                    <a href="#" class="text-gray-400 hover:text-primary text-xl"><i class="fa fa-weixin"></i></a>
                    <a href="#" class="text-gray-400 hover:text-primary text-xl"><i class="fa fa-envelope"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menuBtn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 滚动时导航栏样式变化
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('bg-dark/95');
                header.classList.remove('bg-glass');
            } else {
                header.classList.add('bg-glass');
                header.classList.remove('bg-dark/95');
            }
        });
    </script>
</body>
</html>